<!--
 * @Author: rxn 1003312535@qq.com
 * @Date: 2024-07-05 15:25:53
 * @LastEditors: rxn 1003312535@qq.com
 * @LastEditTime: 2024-07-18 10:03:58
 * @FilePath: \vue3-progect\src\views\example\three\geometry\index.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<!--缓存几何-->
<template>
	<div :id="id"></div>
</template>

<script setup>
import * as THREE from "three";
import { AxesHelper } from "../../case/helper/AxesHelper";
import { CameraHelper } from "../../case/helper/CameraHelper";
import { WebGLRenderer } from "../../create/renderer";
import { OrbitControlsHelper } from "../../case/helper/OrbitControls";
import { PerspectiveCamera } from "../../create/camera";
import { onMounted } from "vue";

//场景
const scene = new THREE.Scene();
AxesHelper(THREE, scene);
const props = defineProps(["id"]);
onMounted(() => {
	let container = document.getElementById(props.id);

	const camera = PerspectiveCamera(
		THREE,
		90,
		container.offsetWidth / container.offsetHeight,
		0.1,
		1000
	);
	camera.position.z = 200;
	CameraHelper(THREE, scene, camera);
	const renderer = WebGLRenderer(THREE, container);
	OrbitControlsHelper(THREE, scene, camera, renderer);
	Geometry();
	function animate() {
		requestAnimationFrame(animate);
		renderer.render(scene, camera);
	}
	animate();
});
/**
 * 分组
 */
const Geometry = () => {
	const ambient = new THREE.AmbientLight("#ffffff");
	scene.add(ambient);
	// const geometry = new THREE.BoxGeometry(20, 20, 20);
	// const material = new THREE.MeshLambertMaterial({ color: 0x0000ff });
	// const group = new THREE.Group();
	// const mesh1 = new THREE.Mesh(geometry, material);
	// const mesh2 = new THREE.Mesh(geometry, material);
	// mesh2.translateX(25);
	// group.add(mesh1);
	// group.add(mesh2);
	// scene.add(group);
	// group.scale.set(4, 4, 4);
	// console.log(group.children);

	const group1 = new THREE.Group();
	group1.name = "高层区域";
	const group2 = new THREE.Group();
	group2.name = "低层区域";
	const material = new THREE.MeshLambertMaterial({ color: 0xffffff });

	for (let i = 0; i < 5; i++) {
		const geometry = new THREE.BoxGeometry(10, 50, 10);
		const material = new THREE.MeshLambertMaterial({ color: 0xffffff });

		const mesh = new THREE.Mesh(geometry, material);
		mesh.position.x = 12 * i;
		group1.add(mesh);
		mesh.name = `${i + 1}号楼`;
	}
	for (let i = 0; i < 5; i++) {
		const geometry = new THREE.BoxGeometry(10, 30, 10);
		const mesh = new THREE.Mesh(geometry, material);
		mesh.position.x = 12 * i;
		mesh.position.z = 20;

		group2.add(mesh);
		mesh.name = `${i + 1}号楼`;
	}
	scene.add(group1, group2);
	// 递归遍历model包含所有的模型节点
	scene.traverse(function (obj) {
		console.log("所有模型节点的名称", obj.name);
		// obj.isMesh：if判断模型对象obj是不是网格模型'Mesh'
		if (obj.isMesh) {
			//判断条件也可以是obj.type === 'Mesh'
			obj.material.color.set(0x0000ff);
		}
	});
	// 返回名.name为"4号楼"对应的对象
	const nameNode = scene.getObjectByName("4号楼");
	nameNode.material.color.set(0xff0000);
};
</script>

<style lang="less" scoped>
#three_container {
	height: 100%;
}
</style>
